import React, { useCallback, useMemo } from 'react';
import { Checkbox, List, Radio, Skeleton } from 'antd';
import { getFileTypeIconSvg } from '@inbiz/utils';
import './style.less';

const prefixCls = 'inbiz-clistStandard';

const ListStandardView = (props) => {
  const {
    multiple,
    config,
    keyName,
    dataSource = [],
    loading,
    renderTitle,
    renderDescription,
    renderActions,

    value = [],
    onChange,
    getAvatarURL,
  } = props;

  const { viewType = 1, isSelected = false } = config;

  const getKeyValue = useCallback(
    (item) => (typeof keyName == 'function' ? keyName(item) : item[keyName]),
    [keyName],
  );
  const FormWrapper = useMemo(
    () => (multiple ? Checkbox.Group : Radio.Group),
    [multiple],
  );
  const FormItem = useMemo(() => (multiple ? Checkbox : Radio), [multiple]);
  const formValue = useMemo(
    () => (multiple ? value : value?.[0]),
    [value, multiple],
  );

  // 显示文件图标
  function thumbImg(row, src?: string) {
    return row.folderType == 1 ? (
      <img
        width={viewType == 1 ? 48 : 32}
        src={src || getFileTypeIconSvg('.folder')}
      />
    ) : row.fileType == 32 ? (
      row.folderType == 1 ? (
        <img
          width={viewType == 1 ? 48 : 32}
          src={src || getFileTypeIconSvg('.link_folder')}
        />
      ) : (
        <img
          width={viewType == 1 ? 48 : 32}
          src={src || getFileTypeIconSvg(row.name)}
        />
      )
    ) : (
      <img
        width={viewType == 1 ? 48 : 32}
        src={src || getFileTypeIconSvg(row.name)}
      />
    );
  }

  const handleChange = useCallback(
    (keysOrEvent) => {
      if (multiple) {
        onChange?.(keysOrEvent);
      } else {
        onChange(keysOrEvent.target.checked ? [keysOrEvent.target.value] : []);
      }
    },
    [multiple, onChange],
  );

  const renderItem = useCallback(
    (item) => {
      return (
        <List.Item
          actions={renderActions(item)}
          className={viewType == 1 ? 'list-item-standard' : 'list-item-small'}
        >
          {isSelected ? (
            <FormItem
              value={getKeyValue(item)}
              checked={value?.includes?.(getKeyValue(item))}
            />
          ) : null}
          <List.Item.Meta
            avatar={thumbImg(item, getAvatarURL?.(item))}
            title={renderTitle(item)}
            description={viewType == 1 ? renderDescription(item) : null}
          />
        </List.Item>
      );
    },
    [
      viewType,
      renderActions,
      isSelected,
      value,
      thumbImg,
      renderTitle,
      renderDescription,
      getAvatarURL,
      FormItem,
      getKeyValue,
    ],
  );

  const ListComponent = useMemo(() => {
    return (
      <List
        size={viewType == 1 ? 'default' : 'small'}
        dataSource={dataSource}
        loading={loading}
        renderItem={renderItem}
      />
    );
  }, [dataSource, loading, viewType, renderItem]);

  return (
    <div className={prefixCls}>
      {isSelected ? (
        <FormWrapper value={formValue} onChange={handleChange}>
          {ListComponent}
        </FormWrapper>
      ) : (
        ListComponent
      )}
    </div>
  );
};

export default ListStandardView;
